<template>
<div id="border">
  <NavBar>
    <div slot="left"><van-icon name="arrow-left" /><span class="left_icon">选择场地</span></div>

  </NavBar>
  <div class="big_tag">
  <div class="tagname"></div>
  <span class="tagtext">空闲</span>
  <div class="tagname"></div>
  <span class="tagtext">已选</span>
  <div class="tagname"></div>
  <span class="tagtext">已定</span>
      <div class="tagname"></div>
  <span class="tagtext">不可选</span>
    </div>

  <div class="father_scroll" ref="father_scroll" v-if="bookinfo.length!==0">

  <div class="addwidth child_scroll" ref="child_scroll">
<!--    <div v-for="item in info">{{item.name}}-->
<!--    <div v-for="item2 in timestamp">{{item2}}</div></div>-->
    <table class="table table-hover">
      <thead>

      <tr>
        <th></th>
        <th v-for="(item,index2) in info" :key="index2">{{item}}</th>
      </tr>
      </thead>
      <tbody>

<!--      <tr v-for="(item,index) in bookinfo" :key="index">-->

<!--        <td v-for="(val,index) in item" @click="infoget(item,index)">-->

<!--                    <span v-if="val.status===0">{{val.status}}</span>-->

<!--        </td>-->

  <tr v-for="(item,index) in bookinfo" :key="index">
<!--    <div class="fixbox">-->
<td>{{item.time}}</td>
<!--      </div>-->
    <td @click="sendstatus(item.status1)" class="indivial"  v-if="item.status1.status===0"
        :class="{active:true,canbook:true,change:borderindex===item.status1.id}">可预约
<!--      <span :class="{change:borderindex===0}">可预约</span>-->
    </td>

        <td  class="indivial" :class={noactive:true} v-else-if="item.status1.status===-1">不可选</td>
            <td  class="indivial" :class={zhanyong:true} v-else>已占用</td>

<!--        <td @click="sendstatus(item.status2)" class="indivial" v-if="item.status2.status===0>{{item.status2.status}}</td>-->
<!--          <td @click="sendstatus(item.status2)" class="indivial" :class={noactive:true} v-else-if="item.status2.status===-1">不可选</td>-->
<!--            <td @click="sendstatus(item.status2)" class="indivial" :class={zhanyong:true} v-else>已占用</td>-->
        <td @click="sendstatus(item.status2)" class="indivial" :class="{active:true,canbook:true,change:borderindex===item.status2.id}" v-if="item.status2.status===0">可预约</td>
        <td class="indivial" :class={noactive:true} v-else-if="item.status2.status===-1">不可选</td>
            <td class="indivial" :class={zhanyong:true} v-else>已占用</td>

        <td @click="sendstatus(item.status3)" class="indivial" :class="{active:true,canbook:true,change:borderindex===item.status3.id}" v-if="item.status3.status===0">可预约</td>
        <td class="indivial" :class={noactive:true} v-else-if="item.status3.status===-1">不可选</td>
            <td class="indivial" :class={zhanyong:true} v-else>已占用</td>

           <td @click="sendstatus(item.status4)" class="indivial" :class="{active:true,canbook:true,change:borderindex===item.status4.id}" v-if="item.status4.status===0">可预约</td>
        <td class="indivial" :class={noactive:true} v-else-if="item.status4.status===-1">不可选</td>
            <td class="indivial" :class={zhanyong:true} v-else>已占用</td>
        <td @click="sendstatus(item.status5)" class="indivial" :class="{active:true,canbook:true,change:borderindex===item.status5.id}" v-if="item.status5.status===0">可预约</td>
        <td class="indivial" :class={noactive:true} v-else-if="item.status5.status===-1">不可选</td>
            <td class="indivial" :class={zhanyong:true} v-else>已占用</td>
        <td @click="sendstatus(item.status6)" class="indivial" :class="{active:true,canbook:true,change:borderindex===item.status6.id}" v-if="item.status6.status===0">可预约</td>
        <td class="indivial" :class={noactive:true} v-else-if="item.status6.status===-1">不可选</td>
            <td class="indivial" :class={zhanyong:true} v-else>已占用</td>
        <td @click="sendstatus(item.status7)" class="indivial" :class="{active:true,canbook:true,change:borderindex===item.status7.id}" v-if="item.status7.status===0">可预约</td>
        <td class="indivial" :class={noactive:true} v-else-if="item.status7.status===-1">不可选</td>
            <td class="indivial" :class={zhanyong:true} v-else>已占用</td>
        <td @click="sendstatus(item.status8)" class="indivial" :class="{active:true,canbook:true,change:borderindex===item.status8.id}" v-if="item.status8.status===0">可预约</td>
        <td class="indivial" :class={noactive:true} v-else-if="item.status8.status===-1">不可选</td>
            <td class="indivial" :class={zhanyong:true} v-else>已占用</td>
        <td @click="sendstatus(item.status9)" class="indivial" :class="{active:true,canbook:true,change:borderindex===item.status9.id}" v-if="item.status9.status===0">可预约</td>
        <td class="indivial" :class={noactive:true} v-else-if="item.status9.status===-1">不可选</td>
            <td class="indivial" :class={zhanyong:true} v-else>已占用</td>
          <td @click="sendstatus(item.status10)" class="indivial" :class="{active:true,canbook:true,change:borderindex===item.status10.id}" v-if="item.status10.status===0">可预约</td>
        <td class="indivial" :class={noactive:true} v-else-if="item.status10.status===-1">不可选</td>
            <td class="indivial" :class={zhanyong:true} v-else>已占用</td>


  </tr>
<!--        <td></td>-->
<!--      </tr>-->
      </tbody>
    </table>

  </div>
    </div>
  <div v-else>今日预约信息未更新,请稍等片刻~</div>
<!--  预定状况-->
  <div v-show="info_book" class="bookinfo">
    <span class="seleted">已选场次({{trybook.length}})</span>
    <ul>
      <li v-for="item in trybook">
<div class="time"><span>{{item.time}}</span></div>
      <div class="name"><span>{{item.name}}</span></div>
      </li>
    </ul>
  </div>

  <van-dialog v-model="show" title="确认预约" show-cancel-button @confirm="surebook">
<div class="sure">
  <div v-if="trybook[0]" class="areaname">场地：{{trybook[0].name}}</div>
    <div v-if="trybook[0]" class="suretime">时间：{{trybook[0].time}}</div>

</div>
</van-dialog>
  <van-submit-bar  button-text="确认预约" @submit="onSubmit" :disabled="trybook.length===0" >

  </van-submit-bar>
</div>
</template>

<script>
import BScroll from "better-scroll";
import {gettryinfo} from "@/network/School/school";
import {getbookinfo} from "@/network/School/school";
import NavBar from "@/components/common/NavBar/NavBar";
import {postbookinfo} from "@/network/School/school";

export default {
name: "Border",
  data(){
  return{
     width:0,
    show:false,
    isative:true,
    info:['1号场','2号场','3号场','4号场','5号场','6号场','7号场','8号场','9号场','10号场'],
    bookinfo:[],
    trybook:[],
    activecolor:true,
    borderindex:0,
    info_book:false
  }
  },
  computed:{
  // classobject(value){
  //   if (value=0){
  //     return {
  //       active:this.isative
  //     }
  //   }
  //
  // }
  },
  methods:{
  surebook(){
    postbookinfo(this.trybook[0].id).then(
        res=>{
          if(res.code===0){
            history.go(0)
            this.$notify({
              type:'success',
              message:'预定成功'
            })
          }
          else {
            this.$toast({
              type:'fail',
              message:res.errmsg
            })
          }
        }
    )
  },
  onSubmit(){
    this.show=true
  },
  sendstatus(status){
    if (this.borderindex===0){
      this.borderindex=status.id

    }

    console.log(status.id);
    // this.activecolor=!this.activecolor
    // this.show=true
    gettryinfo(status.id).then(
        res=>{
          console.log(res);
          if(this.trybook.length===0){
             this.info_book=true
             this.trybook[this.trybook.length]=res
            this.tagIndex=status.id
          }
          else {

            if(status.id==this.trybook[0].id){
              this.borderindex=0
            this.trybook.splice(0,1);
              this.info_book=false
          }
          }
          // console.log(this.trybook);
          // console.log(111);
        }

    )
  },

  infoget(item1,index
  ){
    console.log(item1);
    console.log(index);
  }
  },
  created() {
  getbookinfo().then(
      res=>{
        console.log(res);
        this.bookinfo=res.info
      }
  )
       this.$nextTick(() => {//回调横向滚动方法
         // this.personScroll();
    });

  },
   GetNum() {
        this.width=120*3;
        return this.width;
      },//计算出横向滚动组件需要的总宽度

      personScroll() {
        this.$refs.child_scroll.style.width = this.GetNum() + "px";
        this.$nextTick(() => {
          if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.father_srcoll, {
            startX: 0,
            click: true,
            scrollX: true,//
            scrollY: false,
            eventPassthrough: "vertical"
          });
        } else {
          this.scroll.refresh();
        }
      });
      },//横向滚动

  components: {NavBar}
}
</script>

<style scoped>

.father_scroll
{
  position: absolute;
    height: 405px;
    margin-top: 50px;
    width: 100%;
    overflow: auto;
    z-index:5;
}
.child_scroll{
   width: 100%;
    position: absolute;
    display: flex;
}

.table{
	font-family: verdana,arial,sans-serif;
	font-size:11px;
	color:#333333;
	border-width: 1px;
	/*border-color: #666666;*/

}
table th {
	/*border-width: 1px;*/
	/*padding: 8px;*/
	/*border-style: solid;*/
	/*border-color: #666666;*/
	/*background-color: #dedede;*/
}

table tr{
  /*	border-width: 1px;*/
	/*padding: 8px;*/
	/*border-style: solid;*/
	/*border-color: #666666;*/
	/*background-color: #dedede;*/
}
.addwidth{
  width: 1463px;
  font-size: 12px;

  /*background-color:#f5f6f7;*/

}
/*.indivial.active{*/
/*  background-color: pink;*/
/*}*/
.indivial{
  border-radius: 10px;
  width: 120px;
  height: 30px;
  text-align:center;
  	/*border-width: 1px;*/
	/*padding: 8px;*/
	/*border-style: solid;*/

	background-color: #ffffff;
  border-color:  #1CB194;

}
td:focus{
  background-color: red!important;
}
.indivial:active{
  /*background-color: wheat;*/
}
.active{
  background-color: #7FE1FF;
}
.noactive{
  background-color:  	#DCDCDC;
}
.zhanyong{
  background-color: #F74500;
  color: #ffffff;
}
table{
  border-collapse: separate;
border-spacing: 15px;
}
.canbook{
  /*color: rebeccapurple!important;*/
  color: #ffffff;
}
/*#border{*/
/*  width: 850px;*/


/*}*/
/deep/ .navbar{
    background-color: #1c9fb1;
    color: #fff;
  font-size: 18px;
}
/deep/ .left{
  width: 108px;
}
/deep/ .van-dialog{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
position: absolute;
}
.bscroll{
    width: 100%;
    /*height: 5vH;*/
    overflow: hidden;
}
.change{
  background-color: #33FF36;
color: #684fac;;
}
.bookinfo{

  height: 80px;
  position: fixed;
  bottom: 50px;
  width: 100%;
  padding: 0px 10px;
  border-bottom: 1px solid #cccccc5c;
box-shadow: -14px -10px 15px #eee;
}
.seleted{
  font-size: 12px;
}
.name{
  width: 80px;
  background-color: #ffffff;
  font-size: 12px;
  text-align: center;
  height: 20px;
  color: blue;
  padding-top: 3px;
  border-bottom: 1px solid blue;
  border-right: 1px solid blue;
  border-left: 1px solid blue;
}
.time{
    width: 80px;
  background-color: dodgerblue;
  font-size: 12px;
  text-align: center;
  height: 20px;
  color: #ffffff;
    padding-top: 3px;
  border-top: 1px solid blue;
  border-right: 1px solid blue;
  border-left: 1px solid blue;
}
ul li{
  margin-top: 5px;
}
.sure{
  padding: 18px 93px;
color: black;
}
.areaname{
  margin-bottom:13px
}
/deep/ .van-submit-bar{
  box-shadow: 1px 5px 35px #ccc;
}
.tagname{
width: 26px;
height: 17px;
  border: 1px solid #c0c0c0;
  display: inline-block;
  border-radius: 6px;

}
.tagtext{
  padding: 0 10px;
    line-height: 20px;
  position: relative;
  top: -3px;
}
.big_tag{
  margin-left: 25px;
position: absolute;
top: 10%;
}
.tagname:nth-child(3){
  background-color: #33FF36;
}
.tagname:nth-child(1){
  background-color: #7FE1FF;
}
.tagname:nth-child(7){
  background-color: #DCDCDC;
}
.tagname:nth-child(5){
  background-color: #F74500;
}
.left_icon{
  margin-left: 5px;
}
/deep/ .van-icon{
  font-size: 20px;
    margin-left: 11px;
  position: relative;
    top: 1px;
}
.fixed{
  /*position: fixed;*/
  /*width: 40px;*/
  /*height: 45px;*/
  /*line-height: 45px;*/
  /*text-align: center;*/
  /*z-index: 9999;*/
  /*background-color: #fff;*/

}
.fixbox{
  height: 40px;
  width: 100%
}
.suretime{
  width: 200px;
}
</style>